<template>
    <div class="qingwu">
        <div class="admin_table_page_title"><a-button @click="$router.back()" class="float_right" icon="arrow-left">返回</a-button>banner编辑</div>
        <div class="unline underm"></div>
        <div class="admin_form">
            <a-form-model :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
                <a-form-model-item label="所属小区">
                    <!--<a-select v-model="info.community_id">
                        <a-select-option v-for="(v,k) in community_list" :key="k" :value="v.community_id">{{v.community_name}}</a-select-option>
                    </a-select>-->
                    <a-tree-select :replace-fields="{children:'children', title:'community_name', key:'community_id', value: 'community_id' }" v-model="info.community_ids" :tree-data="community_list" tree-checkable :show-checked-strategy="SHOW_PARENT"></a-tree-select>
                </a-form-model-item>

                <a-form-model-item label="banner名称">
                    <a-input v-model="info.name"></a-input>
                </a-form-model-item>
                <a-form-model-item label="banner图">
                    <a-upload
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        :action="$api.estateAdvsUploadThumb"
                        :data="{token:$getSession('token_type')}"
                        @change="upload"
                    >
                        <img style="max-width:600px" v-if="info.image_url" :src="info.image_url" />
                        <div v-else>
                            <a-font v-if="!loading" type='iconplus' />
                            <a-icon v-else type="loading" />
                        </div>
                    </a-upload>
                </a-form-model-item>

                <a-form-model-item label="链接">
                    <a-input v-model="info.url"></a-input>
                </a-form-model-item>

                <a-form-model-item label="时间">
                    <a-range-picker :value="[info.start_time, info.end_time]" @change="time_format" format="YYYY-MM-DD"></a-range-picker>
                </a-form-model-item>

                <a-form-model-item label="是否启用">
                    <a-radio-group name="is_show" :value="info.is_show" @change="showChange">
                        <a-radio :value="1">是</a-radio>
                        <a-radio :value="0">否</a-radio>
                    </a-radio-group>
                </a-form-model-item>

                <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
                    <a-button type="primary" @click="handleSubmit">提交</a-button>
                </a-form-model-item>
            </a-form-model>

        </div>
    </div>
</template>

<script>
import moment from 'moment';
export default {
    components: {},
    props: {},
    data() {
      return {
          info:{
              is_show:1,
              start_time: '',
              end_time:''
          },
          id:0,
          community_list:[],
          loading:false,
      };
    },
    watch: {},
    computed: {},
    methods: {
        moment,
        handleSubmit(){
            // 验证代码处
            if(this.$isEmpty(this.info.name)){
                return this.$message.error('名称不能为空');
            }
           if(this.$isEmpty(this.info.image_url)){
                return this.$message.error('请上传图片');
            }
            let api = this.$apiHandle(this.$api.fleaBanner,this.id);
            if(api.status){
                this.$put(api.url,this.info).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.msg)
                        return this.$router.back();
                    }else{
                        return this.$message.error(res.msg)
                    }
                })
            }else{
                this.$post(api.url,this.info).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.msg)
                        return this.$router.back();
                    }else{
                        return this.$message.error(res.msg)
                    }
                })
            }


        },
        get_info(){
            this.$get(this.$api.fleaBanner+'/'+this.id).then(res=>{
                res.data.community_ids = [];
                let communityIds = res.data.community_id.split(',')
                communityIds.forEach(item=>{
                    res.data.community_ids.push(item);
                })
                this.info = res.data;

            })
        },
        // 获取菜单列表
        onload(){
            // 判断你是否是编辑
            if(!this.$isEmpty(this.$route.params.id)){
                this.id = this.$route.params.id;
                this.get_info();
            }

            //获取小区列表
           this.$get(this.$api.estateCommunity).then(res=>{
                this.community_list = res.data.data;
            });

        },
        showChange(e){
            console.log(e.target.value)
            this.info.is_show = e.target.value;
        },

        time_format(val){
            if(val.length==0){
                this.info.start_time = ''
                this.info.end_time= ''
                return false
            }
            this.info.start_time = moment(val[0]._d).format("YYYY-MM-DD")
            this.info.end_time = moment(val[1]._d).format("YYYY-MM-DD")
            this.$forceUpdate();
        },
        //上传
        upload(e){
            if(e.file.status == 'done'){
                this.loading = false;
                let rs = e.file.response;
                if(rs.code == 200){
                    this.$set(this.info,'image_url',rs.data);
                }else{
                    return this.$message.error(rs.msg);
                }
            }else{
                this.loading = true;
            }

        }

    },
    created() {
        this.onload();
    },
    mounted() {}
};
</script>
<style lang="scss" scoped>
.permission_title{
    background: #efefef;
    padding:0 20px;
    box-sizing: border-box;
    border-radius: 4px;
}
.cblock{
    margin-top: 10px;
    margin-bottom: 10px;
}
.cbox{
    width: 33%;
    float: left;
}
</style>
